<template>
  <div style="width: 99%">
  <a-layout id="components-layout-demo-custom-trigger">
    <!--头部的操作按钮-->
    <a-layout-header style="background: #fff; padding: 0">
      <!--<div>
        <barview></barview>
      </div>-->
      <div>
        <a-row>
          <a-col :span="4"><h1 style="margin-left: 50px"><a>{{ columnTitle }}</a></h1></a-col>
          <a-col :span="15">

            <!-- 操作按钮区域 -->
            <a-tooltip placement="bottom">
              <template slot="title">
                <span>新建</span>
              </template>
              <a-icon class="trigger" type="file-add" @click="showModal" />
            </a-tooltip>
            <newmodule ref="modalForm" @ok="modalFormOk"></newmodule>
            <a-tooltip placement="bottom">
              <template slot="title">
                <span>下载</span>
              </template>
              <a-icon class="trigger" type="cloud-download" @click="uploadCode" />
            </a-tooltip>
            <a-tooltip placement="right">
              <template slot="title">
                <span>预览</span>
              </template>
              <a-dropdown>
                <a-menu slot="overlay">
                  <a-menu-item key="1" @click="reViewForm">表单页</a-menu-item>
                  <a-menu-item key="2" @click="reViewList">列表页</a-menu-item>
                </a-menu>
                <a-icon class="trigger" type="eye"/>
              </a-dropdown>
            </a-tooltip>

          </a-col>
          <a-col :span="5">


          </a-col>
        </a-row>
      </div>
    </a-layout-header>

    <a-layout>
      <!--左侧的表字段列表-->
      <a-layout-sider
        v-model="leftcollapsed"
        :trigger="null"
        collapsible
        class="color-white"
        width="260px"
      >
        <div >
          <div style="float: left">
            <a-tooltip placement="bottom" v-show="!leftcollapsed">
              <a-button type="link" size="small" @click="refreshTableField">
                刷新
              </a-button>
            </a-tooltip>
          </div>
          <div style="text-align: right">
            <a-icon
              class="trigger"
              :type="leftcollapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (leftcollapsed = !leftcollapsed)"
            />
          </div>
        </div>
        <div style=" overflow-y:auto; overflow-x:auto; height:90%; width: 260px">
          <div :hidden="leftcollapsed" style="margin-left: 0px">
            <draggable v-model="columnNames"  @change="aaa">
              <transition-group>
                <div id="FiledControls" v-for="element in columnNames" :key="element.uiFieldname"  :style="{ padding: '1px' }">
                 <a-button size="large"  style="height: 55px;text-align: left"  :ref="element.id" :id="element.id" type="primary"  block  @click="viewProperty(element)">
                   {{element.uiFieldname}}<br/>{{element.uiFieldcomment}}
                 </a-button>
                </div>
              </transition-group>
            </draggable>
          </div>
        </div>
      </a-layout-sider>
      <!--中间的视图渲染部分-->
      <a-layout-content
        :style="{ margin: '0', padding: '0px', background: '#fff', minHeight: '280px',maxHeight: '800px' }"
      >
        <preview ref="preViewForm"></preview>
      </a-layout-content>
      <!--右侧的表字段具体设置-->
      <a-layout-sider
        v-model="rightcollapsed"
        :trigger="null"
        collapsible
        class="color-white"
        width="420px"
      >
        <div>
          <a-icon
            class="trigger hj-right"
            :type="rightcollapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (rightcollapsed = !rightcollapsed)"
          />
        </div>
        <div>
          <propertyview ref="propertyViewForm" :hidden="rightcollapsed"></propertyview>
        </div>
      </a-layout-sider>
    </a-layout>

  </a-layout>
  </div>
</template>
<script>
//import barview from './CodeBarView'
import newmodule from './CodeNewModule'
//import fieldsview from './CodeFieldsView'
import propertyview from './CodePropertyView'
import preview from '../Components/CodePreview'
import draggable from 'vuedraggable'
import { httpAction ,getAction,putAction} from '@/api/manage'

export default {
  data() {
    return {
      leftcollapsed: false,
      rightcollapsed: false,
      visible: false,
      viewType:this.$route.query.viewType,
      //主表表名
      mainTable:this.$route.query.viewMaintable,
      //主表id
      parentId:this.$route.query.parentId,
      //表名称
      columnTitle:'',
      //表字段
      columnNames:[],
       beforeButton:'',
    }
  },
  components: {
    //barview,
    newmodule,
   // fieldsview,
    propertyview,
    preview,
    draggable,
  },
  created(){
    this.getColumnNames(this.$route.query.viewMaintable,this.$route.query.parentId)
  },
  methods: {
    showModal() {
      this.$refs.modalForm.add(this.viewType)
      this.visible = true
    },
    modalFormOk(tableName,id) {
      this.visible = false
      this.getColumnNames(tableName,id)
    },
    //根据表名称，查询表字段
    getColumnNames(tableName,id){
      console.log(tableName)
      this.columnTitle=tableName;
      this.parentId=id;
      getAction("/generatecode/viewUiproperties/getColumnNames",{tableName:tableName,parentId:id}).then(res => {
        if (res.success) {
          this.columnNames = res.result;
        }
      })
    },

    //拖拽排序
    aaa(){
      putAction("/generatecode/viewUiproperties/dragEdit",this.columnNames)
    },

    //右侧属性设置表单
    viewProperty(arg){
      var currentButton=this.$refs[arg.id][0].$el;
      if (!this.beforeButton) this.beforeButton = currentButton;
      this.beforeButton.style="text-align: left;height: 55px;background-color:white;!important; color: #4a4a48!important";
      currentButton.style="text-align: left;height: 55px;background-color:white!important; color: #1890ff!important";
      this.beforeButton = currentButton;
      getAction("/generatecode/viewUiproperties/queryById",{id:arg.id}).then(res => {
        if (res.success) {
          console.log( res.result);
          this.$refs.propertyViewForm.edit(res.result);
        }
      })
    },


    //下载生成代码
    uploadCode(){
     if(this.columnTitle){
       window.open( `${window._CONFIG['domianURL']}/${'generatecode/getCode?tableName='+this.columnTitle+'&parentId='+this.parentId}`)
     }else{
       this.$message.warning("请先新建！！！")
     }

    },


    //生成表单预览
    reViewForm(){
      getAction("/generatecode/reViewForm",{tableName:this.columnTitle,parentId:this.parentId}).then(res => {
        if (res.success) {
          //console.log( res.result);
          this.$refs.preViewForm.title = '表单页面预览';
          this.$refs.preViewForm.code = res.result;
          this.$refs.preViewForm.running();
        }else{
          this.$message.warning("请先新建！！！")
        }
      })
    },

    //生成列表页预览
    reViewList(){
      getAction("/generatecode/reViewList",{tableName:this.columnTitle,parentId:this.parentId}).then(res => {
        if (res.success) {
          //console.log( res.result);
          this.$refs.preViewForm.title = '列表页面预览';
          this.$refs.preViewForm.code = res.result;
          this.$refs.preViewForm.running();
        }else{
          this.$message.warning("请先新建！！！")
        }
      })
    },

    //刷新表字段，将新增加的表字段添加到字段配置表中
    refreshTableField(){
      getAction("/generatecode/viewUiproperties/refreshTableField",{tableName:this.columnTitle,parentId:this.parentId}).then(res => {
        if (res.success) {
          this.getColumnNames(this.columnTitle,this.parentId)
        }
      })
    },

  }
}
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  /*line-height: 64px;*/
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background-color: white;
  margin: 16px;
}

.color-white {
  background-color: white !important;
}
.hj-right {
  margin-right: 0px !important;
  padding-right: 0px !important;
}
.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 20px;
}

.list-group-item {
  cursor: move;
}

.list-group-item i {
  cursor: pointer;
}
</style>

<style scoped>
.ant-btn-primary {
  color: #3f3f3f;
  background-color: white!important;
  border:0!important;
  border-bottom: 1px solid!important;
  border-color: #c8cbcf!important;
  font-size: 14px!important;
}

</style>


